<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Settings</title>

	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','TabBar','IconContainer']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/kernel"
		], function(dojo){
			var lang = location.search.match(/lang=(\w*)/) ? RegExp.$1 : null;
			if(lang){ dojo.locale = lang; }
			require([
				"dojo/_base/window",
				"dojo/dom",
				"dojo/ready",
				"dijit/registry",
				"dojo/i18n!dojox/mobile/tests/nls/sample",
				"dojox/mobile/i18n",
				"dojox/mobile/parser",
				"dojox/mobile",
				"dojox/mobile/compat",
				"dojox/mobile/TabBar",
				"dojox/mobile/IconContainer"
			], function(win, dom, ready, registry, sample, i18n){
				var bundle = i18n.registerBundle(sample);
				changeLocale = function(){
					win.doc.forms[0].submit();
				}
				ready(function(){
					dom.byId("sel").value = lang;
					registry.byId("item1").set("label", bundle["MINUTES"].replace("%1", "30"));
				});
			});
		});

	</script>
	<style>
	#item2 .mblListItemLabel, #item3 .mblListItemLabel {
		margin-right: 100px;
	}
	</style>
</head>
<body style="visibility:hidden;">
	<div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
		<div data-dojo-type="dojox.mobile.Heading" data-dojo-props='label:"Today", back:"Sunday", moveTo:"#"'>
			<span data-dojo-type="dojox.mobile.ToolBarButton" style="float:right;" data-dojo-props='label:"Monday"'></span>
		</div>
		<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:"segmentedControl"'>
			<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"#", selected:true'>Sunday</li>
			<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"#", label:"Monday"'></li>
		</ul>
		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Today</h2>
		<ul data-dojo-type="dojox.mobile.RoundRectList">
			<li id="item1" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", rightText:"Second"'>
				Sunday
			</li>
			<li id="item2" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", label:"Monday"'>
				<div data-dojo-type="dojox.mobile.Switch"></div>
			</li>
		</ul>

		<h2 data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Today</h2>
		<ul data-dojo-type="dojox.mobile.EdgeToEdgeList">
			<li id="item3" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", label:"Sunday"'>
				<div data-dojo-type="dojox.mobile.Switch" data-dojo-props='leftLabel:"ON"'></div>
			</li>
			<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", rightText:"Second", moveTo:"#", label:"Monday"'>
			</li>
		</ul>

		<ul data-dojo-type="dojox.mobile.IconContainer" data-dojo-props='label:"Today", back:"Second", transition:"slide"'>
			<li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"Sunday", icon:"images/icon-1.png", lazy:true'><div class="box"></div></li>
			<li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"Monday", icon:"images/icon-1.png", lazy:true'><div class="box"></div></li>
		</ul>

		<ul data-dojo-type="dojox.mobile.TabBar">
			<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"#", selected:true'>Sunday</li>
			<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"#", label:"Monday"'></li>
		</ul>

		<form style="margin: 10px;">
			Locale: 
			<select id="sel" name="lang" onchange="changeLocale()">
				<option value=""></option>
				<option value="en">en</option>
				<option value="it">it</option>
				<option value="ja">ja</option>
			</select>
		</form>
	</div>
</body>
</html>
